<template>
  <div class="login">
    <el-button class="login-button" type="info" round size="mini" @click="dialogVisible = true">登录</el-button>
    <el-dialog title="登录" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <div class="choose">
          <img src="@/assets/img/login.png" alt />
          <el-button type="primary" round @click="click(),mobileClick()">手机号登录</el-button>
          <el-button type="primary" round @click="click(),emailClick()">邮箱登录</el-button>
          <el-button round @click="click">注册</el-button>
          <el-checkbox v-model="checked">同意《服务条款》《隐私政策》《儿童隐私政策》</el-checkbox>
        </div>
        <div class="mobile-login">
          <el-input placeholder="请输入手机号" v-model="mobile"></el-input>
          <el-input placeholder="请输入密码" v-model="mobilepwd" show-password></el-input>
          <el-button type="primary" @click="mobileLogin">登录</el-button>
          <div class="rechoose" @click="rechoose">&lt;&nbsp;其它登陆方式</div>
        </div>
        <div class="email-login">
          <el-input placeholder="请输入邮箱" v-model="email"></el-input>
          <el-input placeholder="请输入密码" v-model="emailpwd" show-password></el-input>
          <el-button type="primary" @click="mobileLogin">登录</el-button>
          <div class="rechoose" @click="rechoose">&lt;&nbsp;其它登陆方式</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { _mobileLogin, _emailLogin } from "@/network/login";

export default {
  data() {
    return {
      dialogVisible: false,
      checked: false,
      select: "",
      mobile: "",
      mobilepwd: "",
      email: "",
      emailpwd: ""
    };
  },
  methods: {
    // 判断是否选中协议
    click() {
      if (!this.checked) {
        this.$message.warning(
          "请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》"
        );
      }
    },
    // 更改登录界面
    mobileClick() {
      if (this.checked) {
        document.querySelector(".el-dialog__body").style.height = 230 + "px";
        document.querySelector(".content").style.top = -300 + "px";
      }
    },
    emailClick() {
      if (this.checked) {
        document.querySelector(".el-dialog__body").style.height = 230 + "px";
        document.querySelector(".content").style.top = -530 + "px";
      }
    },
    rechoose() {
      document.querySelector(".el-dialog__body").style.height = 300 + "px";
      document.querySelector(".content").style.top = 0;
    },
    mobileLogin() {
      _mobileLogin(this.mobile, this.mobilepwd).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
        } else {
          this.$message.success("登录成功");
          localStorage.setItem("token", res.token);
          localStorage.setItem("cookies", res.cookies);
        }
      });
    },
    mobileLogin() {
      _emailLogin(this.mobile, this.mobilepwd).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
        } else {
          this.$message.success("登录成功");
          localStorage.setItem("token", res.token);
          localStorage.setItem("cookies", res.cookies);
        }
      });
    }
  }
};
</script>

<style scoped>
.login >>> .el-dialog__header {
  background-color: #242424;
  height: 40px;
  display: flex;
  align-items: center;
}
.login >>> .el-dialog__title {
  color: #fff;
}
.login >>> .el-dialog__headerbtn i {
  color: #fff;
}

.login >>> .el-dialog__body {
  position: relative;
  height: 300px;
  overflow: hidden;
  height: 300px;
  padding: 0;
}

.login-button {
  margin-left: 20px;
  background-color: #000;
  border: 1px solid #aaa;
}

.el-dialog .el-button {
  margin: 5px 0;
  height: 35px;
  width: 60%;
}

.content {
  position: absolute;
  top: 0;
}

.choose {
  width: 100%;
  height: 300px;
  padding: 20px 0;
  text-align: center;
}

.mobile-login,
.email-login {
  height: 230px;
  padding: 20px 60px;
}
.el-select {
  width: 100px;
}

.mobile-login .el-input,
.email-login .el-input {
  margin-bottom: 20px;
}

.mobile-login .el-button,
.email-login .el-button {
  width: 100%;
}

.rechoose {
  margin-top: 10px;
}
</style>